<template>
  <el-dialog :title="obj.tit" :visible.sync="obj.isShow" width="600px">
        <el-form :model="form" style="overflow:hidden;" ref="form" :rules="rules">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="名称" prop="title" label-width="80px">
                        <el-input v-model="form.title" size="small" auto-complete="off" :style="style"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="状态" label-width="80px">
                        <el-select v-model="form.type" size="small" placeholder="请选择" :style="style">
                            <el-option label="显示" value="T"></el-option>
                            <el-option label="隐藏" value="F"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="路由" label-width="80px">
                        <el-input v-model="form.path" size="small" auto-complete="off" :style="style"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="class类" label-width="80px" prop="iconClass">
                        <el-input v-model="form.iconClass" size="small" auto-complete="off" :style="style"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="obj.isShow = false" size="small">取 消</el-button>
            <el-button type="primary" @click="addSuccess('form')" size="small">确 定</el-button>
        </div>
    </el-dialog>
</template>
<script>
import api from '../api'
import {bus} from '../bus.js'
    export default{
        created(){
            let tath=this;
            bus.$on('getMenu',function(res){
                tath.setMenus=res;
            })
        },
        methods:{
            setMenus(){},
            addSuccess(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                         api.$http('/system/setAddMenuOne',this.form,function(err,res){
                            if(res.data.code==1){
                                this.getMenu();
                                this.setMenus();
                                this.$message({
                                    type: 'success',
                                    message: '新增成功!'
                                });
                                this.obj.isShow=false;
                                this.form.title="";
                                this.form.type="T";
                                this.form.path="";
                                this.form.iconClass="";
                                return true;
                            }
                        }.bind(this));
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                })
            }
        },
        props:['obj','getMenu'],
        data(){
            return{
                form:{
                    title:"",
                    type:"T",
                    path:"",
                    iconClass:""
                },
                rules:{
                    title: [
                        { required: true, message: '请输入菜单名', trigger: 'blur' },
                        { min: 1, max: 8, message: '长度在 1 到 8 个字符', trigger: 'blur' }
                    ],
                    iconClass:[
                        { required: true, message: '请输入图标class', trigger: 'blur' }
                    ]
                },
                style:{
                    width:"200px"
                }
            }
        }
    }
</script>
<style scoped>
    .el-dialog__body{
        padding:20px;
    }
    .el-form-item{
        margin-bottom:18px;
    }
    .el-form-item__error{
        padding-top:0;
    }
</style>

